<template>
  <div id="out">
			<div class="top">
				<div class="top1">
					<span class="text">收货人</span>
					<input class="text1 text-1" v-model="address.name" >
				</div><hr >
				<div class="top2">
					<span class="text">手机号码</span>
					<input class="text1" v-model="address.phone_number">
				</div><hr >
				<div class="top1">
					<span class="text">邮政编码</span>
					<input class="text1 text-1" v-model="address.post_code">
				</div><hr >
				<div class="top3">
					<span class="text">所在地区</span>
					<picker class="auth-pick-tip" mode="region" :value="region" :custom-item="customItem" @change="regionPick">
						<span class="text1">
							{{address.province}}，{{address.city}}，{{address.region}}
						</span>
					</picker>
					<img src="/static/imgs_s11/s011_choice.png" >
				</div><hr >
				<div class="top4">
					<span class="text text-3" >详细地址</span>
					<input class="text1 text-2 text-3" v-model="address.detail_address" >
				</div>
				
			</div>
			<div v-if="address.default_status == 1" class="mid">
				<div>设置默认地址</div>
				<img class="img1" src="/static/imgs_s11/s011_fillet_rectangle.png" alt="" @click="default_status0()">
				<img class="img2" src="/static/imgs_s11/s011_ellipse.png" alt="">
			</div>
			<div v-if="address.default_status == 0" class="mid">
				<div>设置默认地址</div>
				<img class="img1" src="/static/imgs_s11/s011_fillet_rectangle_green.png" alt="" @click="default_status1()"> 
				<img class="img2" src="/static/imgs_s11/s011_ellipse_green.png" alt="">
			</div>
		    <div class="mid2" @click="deleteAddress(address.id)">
				删除地址
			</div>


			<div class="btm" @click="updateAddress()">
				修改地址
			</div>
		</div>
</template>

<script>
 
export default {
  data () {
    return {
		region: ['广东省', '广州市', '海珠区'],
		customItem: '',
		address:{}
      }
    },

  methods: {
	  regionPick: function (e) {
		console.log('picker发送选择改变，携带值为', e.mp.detail.value)
		this.region = e.mp.detail.value;
		this.address.province=e.mp.detail.value[0];
		this.address.city=e.mp.detail.value[1];
		this.address.region=e.mp.detail.value[2];
		
	},
       updateAddress:function(){
		   console.log(this.address);
		wx.request({
		  url: 'http://localhost:7777/userm/updateAddress', //开发者服务器接口地址",
		  data:this.address, 
		  method: 'get',
		//   header: {
		// 	"Content-Type": "application/x-www-form-urlencoded"
		// },
		  success: res => {
			 wx.navigateTo({url: '/pages/s011_add_adress (6)/main'});
		  },
		  fail: () => {},
		  complete: () => {}
		});
	},
	default_status0:function(){
		this.address.default_status = 0;
		wx.request({
		  url: 'http://localhost:7777/userm/setDetailAddress', //开发者服务器接口地址",
		  data: this.address, //请求的参数",
		  method: 'GET',
		  success: res => {
			  onload();
		  },
		  fail: () => {},
		  complete: () => {}
		});
	},
	default_status1:function(){
		this.address.default_status = 1;
		wx.request({
		  url: 'http://localhost:7777/userm/setDetailAddress', //开发者服务器接口地址",
		  data: this.address, //请求的参数",
		  method: 'GET',
		  success: res => {
			  onload();
		  },
		  fail: () => {},
		  complete: () => {}
		});
	},
	deleteAddress:function(id){
		wx.request({
		  url: 'http://localhost:7777/userm/deleteAddressById?id='+id, 
		  data: 'data', //请求的参数",
		  method: 'GET',
		  success: res => {
			wx.navigateTo({url: '/pages/s011_add_adress (6)/main'});
		  },
		  fail: () => {},
		  complete: () => {}
		});
	}
  },

  created () {
 
  },
   onLoad:function(options){
        wx.request({
        url: 'http://localhost:7777/userm/getAddressById?id='+options.id, //开发者服务器接口地址",
        method: 'GET',
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
            this.address=res.data;
			 console.log(this.address);
        },
        fail: () => {},
        complete: () => {}
        });
      
    },
}
</script>

<style scoped>
			#out{
				width: 375px;
				height: 667px;
				background-color: rgb(244,244,244);
				border:#F0F0F0 solid 1px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
			}
	
			#out .top{
				width: 373px;
				height: 263px;
				margin: 67px 0px;
				border:#FFFFFF solid 1px;
				background-color: #FFFFFF;
			}
			#out .top hr{
				border: #F0F0F0 solid 0.8px;
			}
			#out .top .top1,.top2,.top3{
				width: 500px;
				height: 43px;
				
				display: flex;
				flex-direction: row;
				
			}
			#out .top .text{
				font-size: 13px;
				margin-left: 14px;
				
				margin-top: 10px;
			}
			#out .top .text1{
				line-height: 43px;
				font-size: 13px;
				color: #C0BFBF;
				margin-left: 40px;
			}
			#out .top .text-1{
				margin-left: 53px;
			}
			#out .top .text-2{
				margin-left: 38px;
			}
			
			#out .top .top3 img
			{
				width: 11px;
				height: 11px;
				margin-top: 15px;
				margin-left: 150px;
			}
			#out .top .top4 span{
				display: inline-block;
			}
			
			
			
			
			
			
			
			#out .mid{
				width: 375px;
				height: 48px;
				margin-top: -55px;
				border:#FFFFFF solid 0.1px;
				background-color: #FFFFFF;
			}
			#out .mid div{
				
				width: 79px;
				height: 12px;
				margin-top: 15px;
				margin-left: 10px;
				font-size: 10px;
				
			}
			#out .mid .img1{
				width: 42px;
				height: 18px;
				position: absolute;
				top: 360px;
				left: 320px;
				
				
				
			}
			
			#out .mid .img2{
				width: 25px;
				height: 25px;
				position: absolute;
				top: 357px;
				left: 318px;
			}
			 #out .delete{
				color: red;
				margin: 0px auto;
			 }
			#out .btm{
				width: 344px;
				height: 35px;
				margin-top: 220px;
				margin-left: 16px;
				
				
				background-color:rgb(57,176,110);
				
				border-radius:18px;
				text-align:center;
				color: #FFFFFF;
				line-height: 35px;
				font-size: 14px;
			}
			#out .mid2{
				height: 48px;
				line-height: 48px;
				background-color: white;
				margin-top: 10px;
				font-size: 13px;
				padding-left: 15px;
				color: #EB1F1F;
				
			}
			
			
		</style>
